<template>
  <div class="KeC">
    <div class="Course_Box">
      <span class="demonstration">日期范围</span>
      <div  size="small">
        <el-date-picker v-model="value1" type="daterange"> </el-date-picker>
      </div>
      <span>课程名称</span>
      <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
      <el-button icon="el-icon-search" @click="add">搜索</el-button>
      <el-button icon="el-icon-refresh-right">重置</el-button>
    </div>


    <div class="Course_Button">
      <el-button type="primary">批量导出</el-button>
    </div>

    <el-table
      border
      :data="list2"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="title" label="课程名称" width="180">
      </el-table-column>
      <el-table-column prop="list1" label="课程类型" width="180">
      </el-table-column>
      <el-table-column prop="teacher" label="授课老师"> </el-table-column>
      <el-table-column prop="total_bte" label="课时数量"> </el-table-column>
      <el-table-column prop="finish_bte" label="已开始课时"> </el-table-column>
      <el-table-column prop="left_bte" label="剩余课时"> </el-table-column>
      <el-table-column prop="caozuo" label="操作">
        <template slot-scope="scope">
          <!-- {{scope.row.id}} -->
          <span class="caozuo" @click="Tan(scope.row.id)"> 课程章节 </span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @next-click="next"
      @prev-click="prev"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="currentPage4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
    >
    </el-pagination>

    <!-- 弹出层 -->
    <div class="Tan" v-show="show">
      <div class="Tan_box">
        <div class="Tan_top">
          <span>课程章节</span>
          <span @click="show = false">X</span>
        </div>
        <div class="Top_zhong">
          <span class="span">课时情况</span>
          <el-select v-model="value2" placeholder="请选择" size="mini">
            <el-option v-for="item in opt" :key="item" :value="item">
            </el-option>
          </el-select>
          <el-button plain icon="el-icon-search" size="mini" @click="Tan_sousuo">搜索</el-button>
          <el-button plain icon="el-icon-refresh-right" size="mini" @click="Tan_chongzhi"
            >重置</el-button
          >

          <el-table  :data="TT" border style="width: 100%">
            <el-table-column prop="title" label="课时名称" width="180">
            </el-table-column>
            <el-table-column prop="study_all_num" label="学习人数" width="180">
            </el-table-column>
            <el-table-column prop="study_finish_num" label="已完成学习人数">
            </el-table-column>
            <el-table-column prop="study_unfinish_num" label="未完成学习人数">
            </el-table-column>
            <el-table-column prop="chapter_status" label="课时情况">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template>
                <span class="caozuo"> 学员详情 </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-button size="small" type="primary">批量导出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourse, getCourseKe } from "../../../api";
import { getTan } from "../../../api/api7";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      input: "",
      value1: "",
      value2: "",
      list: [],
      list1: [],
      list2: [],
      opt: ["已开始", "未开始"],
      show: false,
      // 每页条数
      currentPage4: 1,

      dangqian: 0,
      xiaci: 1,

      Tans: [],
      TT:[]
    };
  },
  mounted() {
    getCourse().then(res => {
      // console.log(1);
      // console.log(res);
      this.list = res.data.list;

      for (var i = this.dangqian; i < this.xiaci; i++) {
        this.list2.push(this.list[i]);
      }
    });
    getCourseKe().then(res => {
      // console.log(1);
      // console.log(res);
      this.list1 = res.data.course_name;
      // console.log(this.list);
    });
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    handleSizeChange(val) {
      this.currentPage4 = val;
    },
    handleCurrentChange(val) {
      this.dangqian = (val - 1) * this.currentPage4;
      this.xiaci = val * this.currentPage4;
      this.list2 = [];
      if (this.xiaci > this.list.length) {
        this.xiaci = this.list.length;
      }
      for (var i = this.dangqian; i < this.xiaci; i++) {
        this.list2.push(this.list[i]);
      }
    },
    next(i) {
      this.dangqian = (i - 1) * this.currentPage4;
      this.xiaci = i * this.currentPage4;
      this.list2 = [];
      if (this.xiaci > this.list.length) {
        this.xiaci = this.list.length;
      }
      for (var i = this.dangqian; i < this.xiaci; i++) {
        this.list2.push(this.list[i]);
      }
    },
    prev(i) {
      console.log(this.currentPage4);
      this.dangqian = (i - 1) * this.currentPage4;
      this.xiaci = i * this.currentPage4;
      this.list2 = [];
      if (this.xiaci > this.list.length) {
        this.xiaci = this.list.length;
      }
      for (var i = this.dangqian; i < this.xiaci; i++) {
        this.list2.push(this.list[i]);
      }
    },
    add() {
      this.list2 = this.list.filter((item) => {
        return item.title.includes(this.input);
      });
    },

    Tan(id) {
      // console.log(id);
      this.show = !this.show;
      getTan(id).then((res) => {
        // console.log(res);
        this.Tans = res.data.list;
        this.TT = res.data.list;
      });
    },

    Tan_sousuo(){
      // console.log(1111);
      this.TT=this.Tans.filter(item=>{
        return item.chapter_status.includes(this.value2)
      })
      // console.log(this.Tans);
    },
    Tan_chongzhi(){
      this.value2=''
      this.TT=this.Tans
    }
  },
};
</script>

<style lang="scss">
// .KeC{
//   position: relative;
// }

.Top_zhong {
  height: 50px;
  line-height: 50px;
}
.span {
  margin: 0 10px 0 20px;
  font-size: 15px;
}
.Tan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 22;
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
  background-color: rgba($color: #000000, $alpha: 0.4);
  .Tan_box {
    width: 800px;
    height: 400px;
    background-color: #fff;
    margin-top: 100px;
    border-radius: 6px;
    .Tan_top {
      height: 50px;
      display: flex;
      justify-content: space-between;
      span {
        cursor: pointer;
      }
      font-weight: 300;
      font-size: 18px;
      line-height: 50px;
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: #ccc solid 1px;
    }
  }
}
.caozuo {
  color: blue;
  cursor: pointer;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.Course_Box {
  // width: 100%;
  height: 40px;
  // border: solid 1px red;
  display: flex;
  justify-content: flex-start !important;
  // justify-content: space-around;
  // align-items: center;
  
  .el-range-separator {
    display: none !important;
  }
  .el-date-editor {
    width: 237px !important;
  }

  .el-input__inner {
    width: 237px !important;
  }
  .el-input--suffix {
    width: 240px !important;
    margin-right: 10px;
  }
}
.Course_Box > span {
  display: block;
  width: 82px !important;
  height: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.Course_Button > .el-button--primary {
  width: 80px;
  height: 35px;
  text-align: center;
  padding: 0;
  margin: 15px 0 10px 0;
}
</style>
